<?php 
$pictureList = new PictureList();
$pictureList = $pictureList->getNotBoughtByAccountId(Session::get('account_id'));
$boughtPictureList = new PictureList();
$boughtPictureList = $boughtPictureList->getBoughtByAccountId(Session::get('account_id'));
$amountBought = count($boughtPictureList);
$chip = new Chip();
$chip = $chip->get(Session::get('chip_id'));

$visited_pages = unserialize($chip->visited_pages);
if($visited_pages['fotoservice'] == 0):
	$visited_pages['fotoservice'] = 1;
	$chip->visited_pages = serialize($visited_pages);
	$chip->save();
?>
	<script>
	$(function() {
		
		
		$("#info-form").dialog( "option", "width", 500 );
		$("#info-form").dialog("open");
	});
	</script>

<? endif; ?>
	<div id="info-form" style="display: none" title="Uitleg over fotoservice">
		<p>Op deze pagina ziet u alle foto's die gemaakt zijn in de attracties. druk op het vergrootglas om een foto te vergroten en op toevoegen om de foto in de winkelmand te plaatsen. Druk op "kopen" om te bestellen. (U betaalt de foto's van uw saldo, dus u dient genoeg saldo te hebben.) Druk op "mijn gekochte foto's" om alle betaalde foto's te bekijken. Uw foto's kunt u aan het eind van uw bezoek ophalen bij de fotoservice.</p>
	</div>
	
<style>
.picture{
	overflow:hidden;
	position:relative;
	height:300px;
	margin-bottom:25px;
}
.overlay{
    bottom: 10px;
    height: 32px;
    left: 10px;
    opacity: 0.8;
    position: absolute;
    width: auto;
}
.overlay a{
	cursor: pointer;
	display: block;
    float: left;
	color:#482800;
    padding: 5px 0;
    position: relative;
    text-align: center;
    width: 30px;
	border:1px solid #482800;
	text-decoration:none;
	background: #d9bc96;
}
.picture img{
	height:100%;
	width:auto;
	opacity:0.5;
}
.border{
	opacity:1 !important;
}
.box.brown{
	background:#eedbb1;
}
.box.brown dl{
	padding:20px;
	text-transform:uppercase;
}
.box.brown dt{
	font-weight:bold;
	float: left;
	width: 150px;
}
#gekocht{
	cursor:pointer;
	background: #875A43;
    border-top: 5px solid #FFECCA;
    color: yellow;
    display: block;
    padding: 10px 20px;
    text-transform: uppercase;
}
.vergroten{
	text-indent:-9999px;
	background:#d9bc96 url('../img/icons/foto_vergroten.png') no-repeat !important;
}
.toevoegen{
	text-indent:25px;
	width:130px !important;
	margin-left:5px;
	background:#d9bc96 url('../img/icons/foto_toevoegen.png') no-repeat !important;
}
</style>
	<div class="row">
		<div class="twelvecol box red last">
			<div class="outer_wrapper rounded">
				<div class="wrapper">
					<div class="top_nav">
					
					<button class="twocol last" id="popupinformatie" style="float: right">Informatie</button>
					<script>
	$('#popupinformatie').click(function(){

		
		$("#info-form").dialog( "option", "width", 500 );
		$("#info-form").dialog('open');

	});
	</script>
					
						<button class="twocol" onClick="javascript: history.go(-1)">Terug</button>
						<h2>Fotoservice</h2>
						
					</div>
				</div>
			</div>
		</div>
		
		<div class="fourcol box brown">
			<h2>Winkelmand</h2>
			<dl>
				<dt>Totaal foto's</dt>
				<dd><span id="aantal">0</span></dd>
				<dt>Totaal kosten</dt>
				<dd>&euro; <span id="kosten">0.00</span></dd>
				<dt>Huidige saldo</dt>
				<dd>&euro; <?php echo $chip->credit?></dd>
			</dl>
			<button id="kopen" class="margin-left margin-bottom">Kopen</button>
            <div class="gekocht">
            	<a id="gekocht">Mijn gekochte foto's</a>
            </div>
		</div>
	<?php for($i=0; $i < count($pictureList); $i++){?>
		<div class="fourcol<?php echo ($i%3 == 1 ? " last" : "")?> picture" data-id="<?php echo $pictureList[$i]->id?>">
			<img src="<?php echo URL . 'img/user_pictures/' . $pictureList[$i]->picture; ?>" />
			<div class="overlay">
				<a href="<?php echo URL ?>fotoservice/foto/<?php echo $pictureList[$i]->id?>" class="vergroten rounded">+</a>
				<a class="toevoegen rounded" onclick="javascript: return false;">Toevoegen</a>
				
			</div>
		</div>
	<?php }?>
	</div>
</div>

<script>
var list = {'chip_id': '<?php echo Session::get('chip_id')?>', 'kosten': '0', 'pictures': []};
var prijs = 2;

function updateKosten(){
	list.kosten = list.pictures.length * prijs;
	$('#kosten').html(list.kosten.toFixed(2));
	$('#aantal').html(list.pictures.length);
}

function hideBoughtPictures(){
	for(var i=0; i<list.length; i++){
		$('.border').parent().remove();
	}
}

$('.picture').click(function(){
	$(this).children('.overlay').show();
});

$('.overlay a:last-child').click(function(event){
	id = $(this).parent().parent().data('id');
	index = jQuery.inArray(id, list.pictures);
	if(index == -1){ /* id staat niet in list[]; toevoegen dus.. */
		list.pictures.push(id);
		$(this).html("Verwijderen");
	} else{ /* id staat in list[]; verwijderen dus.. */
		list.pictures.splice(index,1);
		$(this).html("Toevoegen");
	}
	
	$(this).parent().parent().children('img').toggleClass('border');
	
	updateKosten();
});

$('#kopen').click(function(){
	if(list.pictures.length == 0){
		alert("Je hebt nog geen foto's toegevoegd om te kopen");
	}
	else if(list.kosten > <?php echo $chip->credit?>){
		alert("Je hebt te weinig saldo om te kopen");
	}
	else{
		$.post("<?php echo URL?>ajax/buy_pictures.php", list, function(){
			window.location = '<?php echo URL?>fotoservice';
			});
	}
	
});
$('#gekocht').click(function(){
	if(<?php echo $amountBought?> == 0){
		alert("Je hebt nog geen foto's gekocht");
	}
	else{
		window.location = '<?php echo URL?>fotoservice/gekocht';
	}
	
});


</script>
